<template>
<div class="ctn">
  <img alt="Vue logo" src="@/assets/logo.png"/>
  <div> {{ 'name:' + name }} </div>
  <div> {{ `age:${age}` }} </div>
  <div> {{ 'count:' + count }} </div>
  <div> {{'computedVal readOnly computed{()=>age.value++}:' + readOnlyAge + ' computedVal set and get' + computedAge }}</div>
</div>
</template>

<script>
import { defineComponent, reactive, ref, isRef, toRefs, computed } from 'vue'
export default defineComponent({
  setup (props, { attrs, slots, emit }) {
    console.log(props, 11)
    console.log(attrs)
    console.log(slots)
    console.log(emit, 14)

    // ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value
    const count = ref<Number>(19)
    // 在js 中获取ref 中定义的值, 需要通过value属性
    console.log('count' + count.value)

    // isRef() 用来判断某个值是否为 ref() 创建出来的对象
    const test = 'ssdcsdcds'
    const age = ref(18)
    age.value = 19
    console.log(age)
    console.log(isRef(test)) // false
    console.log(isRef(age)) // true

    // reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可
    const state = reactive({
      name: 'huangxiaoya',
      count
    })
    // 通过reactive 来获读取 赋值ref时,不需要使用.value属性
    console.log(state.count)
    state.count = 30

    // 根据 age 的值，创建一个响应式的计算属性 readOnlyAge,它会根据依赖的 ref 自动计算并返回一个新的 ref
    const readOnlyAge = computed(() => age.value) // 不能在computed中改变页面变量的值，如果需要改变，请使用watch
    // readOnlyAge.value = 1000; // 报错

    // 为计算属性赋值的操作，会触发 set 函数, 触发 set 函数后，age 的值会被更新
    const computedAge = computed({
      get: () => state.count,
      set: value => {
        state.count = value
        return state.count
      }
    })
    computedAge.value = 100

    return {
      // toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据
      ...toRefs(state),
      count,
      test,
      age,
      readOnlyAge,
      computedAge
    }
  }
})
</script>

<style>

</style>
